<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 遮罩层样式 */
        .image-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 图片元素样式 */
        .image-preview-active {
            max-width: 80%;
            max-height: 80%;
            object-fit: contain;
        }
    </style>
</head>

<body>
    <div class="image-preview">
        <img src="https://lh3.googleusercontent.com/zX24bpKXVM4u2sPzBs7Bure1BJX4gf8DjbsInZsAft3d9zDdo4A_C0kIHVWgDpPKZeWiXaoQFjCwrzzxcXZTfuUqa61prSIRyV7d8BI" alt="Preview Image">
    </div>

</body>
<script>
    // 获取所有图片元素
    const images = document.querySelectorAll('.image-preview img');

    // 循环遍历图片元素并绑定点击事件
    images.forEach(image => {
        image.addEventListener('click', () => {
            // 创建遮罩层元素并添加到页面中
            const overlay = document.createElement('div');
            overlay.classList.add('image-overlay');
            document.body.appendChild(overlay);

            // 克隆点击的图片元素并添加到遮罩层中
            const previewImage = image.cloneNode();
            previewImage.classList.add('image-preview-active');
            overlay.appendChild(previewImage);

    // 绑定关闭事件，在点击
            overlay.addEventListener('click', function() {
                document.body.removeChild(overlay)
            })
        }) })
</script>

</html>